<template>
	<view>
		<view class="back-home" @click="backhome()">
			<image src="./ss.png"></image>
		</view>
		<view class="page-title">个人养老金营销信息登记</view>
		<view class="container" style="display: flex;justify-content: center;flex-direction: column;">
			<view style="margin: 15px;padding-top: 5px;">
				<view style="display: flex;justify-content: center;flex-direction: column;" v-for="item in inputlist">
					<view class="xxcontain">
						<view style="margin-top: 10px;color:#808080;font-size: 15px;">
							* {{item.label}}
						</view>
						<input v-if="item.prop=='empDept'||item.prop=='empTel'" disabled="true"
							style="color: #000000;margin-top: 20px;margin-left:10px;: #555;width: 83%;float: left;"
						 type="text" v-model="form[item.prop]" />
						<input v-if="item.prop!='empDept'&&item.prop!='empTel'"
							style="color: #000000;margin-top: 20px;margin-left:10px;: #555;width: 83%;float: left;"
							type="text" v-model="form[item.prop]" />
						<view class="customTelDigt" v-if="item.prop=='customTel'" style="margin-top: 20px;">
							<text style="width: 10%;color:#808080;">{{form[item.prop].length}}/11</text>
						</view>
						<view class="xhx">
							<view style="width: 93%;height:1px;margin-left:10px;background-color: #dadada;float: left;">
							</view>
						</view>
					</view>
				</view>
				<view class="bottom: 20rpx">
					<view class="crz-btn" @click="apply">
						提交
					</view>
					<view class="crz-btn" @click="goToRecord">
						已登记客户查询
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import jscookie from '../js.cookie.js'
	import Watermark from '../watermark.js';
		
	export default {
		data() {
			return {
				empty: {},
				inputlist: [{
					prop: 'customTel',
					label: '客户手机号',
					type: '',
					option: ''
				}, {
					prop: 'customName',
					label: '客户姓名',
					type: '',
					option: ''
				}, 
				{
					prop: 'empName',
					label: '员工姓名',
					type: '',
					option: ''
				},
				{
					prop: 'empDept',
					label: '我的部室',
					type: '',
					option: ''
				}, {
					prop: 'empTel',
					label: '我的手机号',
					type: '',
					option: ''
				}],
				form: {
					customTel: "",
					customName: "",
					empDept: "",
					empTel: "",
					empName: "",
				},
				findDeptParam: {
					usapId:''
				}
			}
		},
		onShow: function() {
			uni.showLoading({
				title: 'Loading'
			});
			setTimeout(() => {
				uni.request({
					url: window.location.origin + '/mobilereport_stage/api/usap-users-bind',
					// url: 'https://app.xm.abchina.com.cn/mobilereport_stage/api/usap-users-bind',
					method: 'GET',
					success: (res) => {
						uni.setStorageSync('userToken', res.data.employeeId);
						if (res.data.name != undefined) {
							this.username = res.data.name
							Watermark.set(res.data.name)
						} else {
							window.location.href = window.location.origin + '/mobilereport_stage/'
						}
					},
					fail: (res) => {
						uni.hideLoading();
						console.log(res);
						window.location.href = 'https://jupyter.xm.abc/mobilereport_stage/'
					}
				});
				if (jscookie.get('authenticationToken') != undefined) {
					try {
						uni.setStorageSync('authenticationToken', jscookie.get('authenticationToken'));
					} catch (e) {
						window.location.href = 'https://jupyter.xm.abc/mobilereport_stage/'
					}
				}
				try {
					if (uni.getStorageSync('authenticationToken') == undefined) {
						window.location.href = 'https://jupyter.xm.abc/mobilereport_stage/'
					} //取身份
				} catch (e) {
					window.location.href = 'https://jupyter.xm.abc/mobilereport_stage/'
				}
				this.ajax(null,"Huaruntong/Custom/findDept","findDept")
			}, 1000)
		},
		onLoad(options) {
			if (options.newsType) {
				this.newsType = options.newsType
			}
			//#ifdef H5
			uni.setNavigationBarTitle({
				title: options.typeName ? options.typeName : ""
			});
			window.document.title = options.typeName ? options.typeName : "";
			//#endif
		},
		onHide() {},
		methods: {
			goToRecord() {
				uni.navigateTo({
					url: '../yanglaojin/applyRecord'
				})
			},
			backhome() {
				window.location.href = window.location.origin + '/mobilereport_stage/'
			},
			apply() {
				if (this.form.customTel.length != 11) {
					uni.showModal({
						title: '手机号位数有误！',
						showCancel: false
					});
				} else if (this.form.customName.length < 2) {
					uni.showModal({
						title: '客户姓名格式有误！',
						showCancel: false
					});
				} else {
					this.ajax(this.form, "Yanglaojin/CustomRecord/insert", "apply")
				}
			},
			ajax: function(da, ur, key) { //封装ajax
				uni.request({
					// url: ur, //仅为示例，并非真实接口地址。
					url: this.$store.url.yuming + ur, //仅为示例，并非真实接口地址。
					data: da,
					method: 'POST',
					header: {
						'Content-Type': 'application/json;',
						token: uni.getStorageSync('authenticationToken'),
						// 'token':'suxiang_testToken'
					},
					success: (res) => {
						if (res.data.code == "0000") {
							if (key == 'findDept') {
								this.form.empDept = res.data.data.dept
								this.form.empTel = res.data.data.tel
								this.form.empName = res.data.data.name
								uni.hideLoading();
							}
							if (key == 'apply') { //提交
								uni.showModal({
									title: '提交成功',
									showCancel: false
								});
								this.form.customTel = ""
								this.form.customName = ""
							}
						} else {
							if (res.data.msg) {
								uni.showModal({
									title: res.data.msg,
									showCancel: false
								});
							} else {
								uni.showModal({
									title: res.data.message,
									showCancel: false
								});
							}
						}
					}
				});
			}
		}
	}
</script>

<style>
	.back-home {
		position: fixed;
		right: 20px;
		bottom: 20px;
		padding: 10px;
		border-radius: 50%;
		overflow: hidden;
		box-shadow: darkgrey 0px 0px 10rpx 5rpx;
		background: #fff;
		z-index: 99;
	}

	.back-home image {
		width: 50rpx;
		height: 50rpx;
		display: block;

	}

	.page-title {
		color: #555;
		font-weight: 800;
		margin: 20rpx 20rpx 0 20rpx;
		font-size: 32rpx;
		display: flex;
		align-items: center;
	}

	.page-title::before {
		content: ' ';
		width: 16rpx;
		height: 40rpx;
		background: #31C8B6;
		margin-right: 20rpx;

	}

	.apply-content {
		background: #fff;
		margin: 20rpx;
		margin-bottom: 0;
		margin-top: 10rpx;
		border-radius: 20rpx;
		overflow: hidden;
	}

	.apply-content-title {
		font-size: 34rpx;
		font-weight: 700;
		color: #555;
		padding: 20rpx 30rpx;

	}

	.apply-content-cell-left {
		flex-shrink: 0;
		margin-right: 20rpx;
		font-size: 34rpx;
		color: #555;
	}

	.apply-content-cell-right {
		flex: 1;
	}

	.apply-content-cell {
		display: flex;
		padding: 20rpx 0;
		border-bottom: 1px solid #e5e5e5;
	}

	.apply-content-cell-input {
		text-align: center;
	}

	.crz-btn {
		font-size: 32rpx;
		height: 88rpx;
		line-height: 88rpx;
		background-color: #0b9b89;
		color: #FFFFFF;
		border-radius: 44rpx;
		text-align: center;
		margin: 30rpx;
	}
</style>
